<template>
  <el-dialog title="状态更改" :visible.sync="visible" width="40%" lock-scroll>
    <el-form :model="form" style="height:150px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="当前状态" :label-width="formLabelWidth">
            <el-select v-model="form.status" placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in stausData"
                :label="item.label"
                :value="item.value"
                :key="item.label+item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.status!=1&&form.status">
          <el-form-item label="状态原因" :label-width="formLabelWidth">
            <el-input v-model="form.reason" placeholder="请填写原因" type="textarea" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    saveForm: Function,
  },
  data() {
    return {
      stausData: [
        {
          label: "未开始",
          value: -2,
        },
        {
          label: "异常",
          value: -1,
        },
        {
          label: "正常",
          value: 1,
        },
        {
          label: "暂停",
          value: 2,
        },
        {
          label: "试运行",
          value: 3,
        },
        {
          label: "运维",
          value: 4,
        },
        {
          label: "结束",
          value: 5,
        },
      ],
      visible: false,
      loading: false,
      form: {
        status: null,
        reason: "",
      },
      setData: {},
      formLabelWidth: "140px",
    };
  },
  methods: {
    openDialog() {
      this.visible = true;
    },
    cancelDialog() {
      this.form = {
        status: null,
        reason: "",
      };
      this.loading = false;
      this.visible = false;
    },
    setDate(datas) {
      let curItem;
      if (datas.curr_status != "无匹配阶段") {
        curItem = this.stausData.filter(
          (val) => val.label == datas.curr_status
        );
        this.form = {
          ...datas,
          status: curItem[0].value,
        };
      }
      this.setData = { ...datas };
    },
    cancelLoading() {
      this.loading = false;
    },
    submit() {
      let parmars = {
        project_id: this.setData.id,
        class_id: this.setData.class_id,
        stage_id: this.setData.stage_id,
        status: this.form.status,
        reason: this.form.status != 1 ? this.form.reason : "",
      };
      this.saveForm(parmars);
      this.loading = true;
    },
  },
};
</script>